<template>
  <div class="line-container">
    <el-button size="mini" class="stop-btn" @click="handleClickStop">{{flag?'暂停':'启动'}}</el-button>
    <ve-line :data="chartData" :extend="extend"></ve-line>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
import { setInterval, clearInterval } from "timers";
let timer = null;
export default {
  data() {
    this.extend = {
      color: ["#5deed8"],
      xAxis: {
        show: false
      },
      yAxis: {
        show: true,
        //刻度
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: "solid",
            color: "#ccc",
            width: "1"
          }
        }
      },
      tooltip: {
        backgroundColor: "#fff",
        textStyle: {
          color: "#000"
        },
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);"
      },
      series: {
        symbolSize: 15,
        symbol: "none",
        smooth: false,
        areaStyle: {
          x: 0,
          y: 0.5,
          x2: 0,
          y2: 1,
          origin: "start",
          opacity: 0.09
        },
        label: {
          show: true
        }
      }
    };
    return {
      flag:true,
      chartData: {
        columns: ["时间", "流量"],
        rows: []
      },
      n: 31
    };
  },
  mounted() {
    this.pushDataing()
  },
 
  methods: {
    pushDataing() {
      timer = setInterval(() => {
        let date = new Date();
        this.chartData.rows.push({
          时间: date.toLocaleTimeString(),
          流量: Math.round(Math.random() * 10000)
        });
        if (this.chartData.rows.length > 50) {
          this.chartData.rows.shift();
        }
      }, 1000);
    },
    handleClickStop() {
      this.flag? clearInterval(timer):this.pushDataing()
      this.flag = !this.flag
    }
  }
};
</script>


<style lang="scss" scoped>
.line-container {
  padding-top: 20px;
  width: 100%;
  .stop-btn {
    margin-left: 50px;
  }
}
</style>
